<style lang="scss" scoped>
@import '@/assets/css/variable';
.courseContainer{
	width: 100%;
	background-color: $bgw;
	min-height: 100%;
	font-size: 1.2rem;
	overflow-y: scroll;
	box-sizing: border-box;
	flex:1;
	background-color: $main-bgc-gray;
  background-color: #fff;
	padding: 10px;
    
    
    .form {
        width: 100%;
        height: 100%;
        padding: 37px 15px 0 6px;
        color: #191F25;
        font-size: 16px;
        .form-title {
            margin-left: 15px;
            font-weight: 600;
        }
        .active {
            margin-top: 30px;
        }
        .demand {
          display: inline-block;
          width: 100%; 
          height: 44px; 
          background: #166CF0;
          border-radius: 8px;
          border: 1px solid #fff;
          color: #fff;
        }
    }
	
  // .block {
  //   display: inline-block;
  //   width: 80px;
  //   height: 32px;
  //   line-height: 32px;
  //   color: #323233;
  //   font-size: 12px;
  //   text-align: center;
  //   border-radius: 14px;
  //   border: 1px solid #ebedf0
  // }
}


</style>

<template>
	<div class="courseContainer"> 
      
      <!-- <bar-nav @getBack="getBack" @backHome="backHome"  :title="title"></bar-nav> -->

      <div class="form">
        <van-form ref="loginForm" @submit="onSubmit">
        <div class="form-title">姓名</div>
        <van-field
            :rules="userFormRules.name"
            name="name"
            v-model="modelList.name"
            placeholder="请输入姓名"
            input-align="left"
        />

        <div class="form-title active">手机号</div>
        <van-field
            :rules="userFormRules.telphone"
            name="telphone"
            v-model="modelList.telphone"
            placeholder="请输入手机号"
            input-align="left"
        />


        <div class="form-title active">验证码</div>
        <van-field
            :rules="userFormRules.code"
            name="code"
            v-model="modelList.code"
            placeholder="请输入验证码"
            input-align="left"
        >
        <i slot="left-icon" class="toutiao toutiao-yanzhengma"></i>
        <template #button>
          <van-count-down
            v-if="isCountDownShow"
            :time="1000 * 60"
            format="ss s"
            @finish="isCountDownShow = false"
          >
          <template #default="timeData">
              <van-button round size="small" type="default">{{ timeData.seconds }}s</van-button>
          </template>
        </van-count-down>
          <van-button
            v-else
            class="send-sms-btn"
            native-type="button"
            round
            size="small"
            type="default"
            @click="onSendSms"
          >发送验证码</van-button>
        </template>
      </van-field>
        <div style="margin: 16px;">
            <button class="demand">立即查询</button>
        </div>
        </van-form>
      </div>
	</div>
</template>

<script>
import { myMixins } from "@/assets/js/mixins.js"
import BarNav from '@/components/BarNav'




export default {
	mixins: [myMixins],
	name: 'course',
	data() {
		return {
          modelList: {
            name: '',
		        telphone: '',
            code: ''
	        },
          // 姓名和手机号验证规则
         userFormRules: {
           name: [{ required: true }],
           telphone: [{ required: true },{ pattern: /^1(?:70\d|(?:9[89]|8[0-24-9]|7[135-8]|66|5[0-35-9])\d|3(?:4[0-8]|[0-35-9]\d))\d{7}$/, message: '手机号格式错误' }],
           code: [{required: true,message: '验证码不能为空'}, {pattern: /^\d{6}$/,message: '验证码格式错误'}]
          },
          title: '建议反馈',
          isCountDownShow: false // 是否展示倒计时
		}
	},
	components: {
		BarNav
	},
	watch: {
		
	},
	mounted() {
		
	},
	methods: {
	  // 查询
      onSubmit() {
        this.$request.QueryGuest({
        params: {
            name: this.modelList.name,
            telphone: this.modelList.telphone
        }
        }).then(res => {
          if(res.result.records.length == 0) {
            return this.$toast('查询失败，请重试！');
          }
          this.$store.commit('setFeedback', res.result.records)
          this.$router.push({
          path: '/advicesuggest',
          query: {selected: "2"}
        })
        })
        
      },

      // 发送验证码
      async onSendSms() {
        // 1. 校验手机号
        try {
          await this.$refs.loginForm.validate('telphone')
        } catch (err) {
          return console.log('验证失败', err)
        }
        this.isCountDownShow = true
        // try {
        //   await sendSms(this.user.mobile)
        //   this.$toast('发送成功')
        // } catch (err) {
        //   // 发送失败，关闭倒计时
        //   this.isCountDownShow = false
        //   this.$toast('发送失败，请稍后重试')
        //   
        // }
      }
		},
	}

</script>